<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Console Tricks!💩💩💩</title>
</head>

<body>

    <p onClick="makeGreen()">×BREAK×DOWN×</p>

    <script>
        const dogs = [{
            name: 'Snickers',
            age: 2
        }, {
            name: 'hugo',
            age: 8
        }];

        function makeGreen() {
            const p = document.querySelector('p');
            p.style.color = '#BADA55';
            p.style.fontSize = '50px';
        }

        // Regular
        console.log('hello')
        // Interpolated
        console.log('hi,%s%s%s', '💩', '\uD83D\uDE04', '💩')
        console.log('total:%d', 100.79)
        console.log('total:%f', 100.79)
        // Styled
        console.log('%c STYLE', 'font-size:50px; text-shadow:10px 10px 0 blue')
        // warning!
        console.warn('be careful')
        // Error :|
        console.error('oh no :|')
        // Info
        //谷歌不支持哈哈哈哈，支持的话是圆形蓝底白色的感叹号
        console.info('this is an info')
        // Testing
        const p = document.querySelector('p')
        console.assert(p.classList.contains('ouch'), 'That is wrong!')
        // clearing
        console.clear()
        // Viewing DOM Elements
        console.log(p)
        console.dir(p)
        // Grouping together
        dogs.forEach(dog => {
            console.group()
            //console.groupCollapsed()
            console.log(`${dog.name}`)
            console.log(`${dog.age}`)
            console.groupEnd(`${dog.name}`)
        })
        // counting
        console.count('a') //a:1
        console.count('a') //a:2
        // timing
    </script>
</body>

</html>